<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <title>消息盒子</title>

    <link rel="stylesheet" href="../../../layui.css?v=1" />
    <style>
      .layim-msgbox {
        margin: 15px;
      }
      .layim-msgbox li {
        position: relative;
        margin-bottom: 10px;
        padding: 0 130px 10px 60px;
        padding-bottom: 10px;
        line-height: 22px;
        border-bottom: 1px dotted #e2e2e2;
      }
      .layim-msgbox .layim-msgbox-tips {
        margin: 0;
        padding: 10px 0;
        border: none;
        text-align: center;
        color: #999;
      }
      .layim-msgbox .layim-msgbox-system {
        padding: 0 10px 10px 10px;
      }
      .layim-msgbox li p span {
        padding-left: 5px;
        color: #999;
      }
      .layim-msgbox li p em {
        font-style: normal;
        color: #ff5722;
      }

      .layim-msgbox-avatar {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
      }
      .layim-msgbox-user {
        padding-top: 5px;
      }
      .layim-msgbox-content {
        margin-top: 3px;
      }
      .layim-msgbox .layui-btn-small {
        padding: 0 15px;
        margin-left: 5px;
      }
      .layim-msgbox-btn {
        position: absolute;
        right: 0;
        top: 12px;
        color: #999;
      }
        .layui-flow-more {
            display: none;
        }
    </style>
  </head>
  <body>
    <ul class="layim-msgbox" id="LAY_view"></ul>

<!--    <div style="margin: 0 15px;">-->
<!--      <blockquote class="layui-elem-quote">-->
<!--        注意：这些都是模拟数据，实际使用时，需将其中的模拟接口改为你的项目真实接口。-->
<!--        <br />该模版文件所在目录（相对于layui.js）：/css/modules/layim/html/msgbox.html-->
<!--      </blockquote>-->
<!--    </div>-->

    <textarea title="消息模版" id="LAY_tpl" style="display:none;">
        {{# layui.each(d.data, function(index, item){ }}
            <li class="layim-msgbox-system">
              <p><em>系统：</em>{{ item.content }}<span>{{ layui.data.date(item.sendTime) }}</span></p>
            </li>
        {{# }); }}
    </textarea>

    <script src="../../../../layui.js?v=1"></script>
    <script>
      function getToken() {
        if (window.sessionStorage.getItem("mall-token")) {
          var obj = JSON.parse(window.sessionStorage.getItem("mall-token"));
          return obj.content.a_token;
        }
        return "";
      }
      layui.use(["layim", "flow"], function() {
        var layim = layui.layim,
          layer = layui.layer,
          laytpl = layui.laytpl,
          $ = layui.jquery,
          flow = layui.flow;

        var cache = {}; //用于临时记录请求到的数据

        //请求消息
        function renderMsg(page, callback) {
          $.ajax({
            url: "/msg/message/getMySysMsgs",
            headers: {
              Authorization: getToken()
            },
            data: { page: page || 1 },
            type: "Post",
            dataType: "json",
            success: function(res) {
              if (res.code != 200) {
                return layer.msg(res.message);
              }
              console.log(res);
              //记录来源用户信息
              layui.each(res.data, function(index, item) {
                cache[item.from] = item.user;
              });
              callback && callback(res.data, 50);
            }
          });
        }

        //消息信息流
        flow.load({
          elem: "#LAY_view", //流加载容器
          // isAuto: false,
          done: function(page, next) {
            //加载下一页
            renderMsg(page, function(data, pages) {
              var html = laytpl(LAY_tpl.value).render({
                data: data,
                page: page
              });
                console.log(html,'数据111');
              console.log(data,'数据');
              next(html, page < pages);
              if(data.length == 0) {
                  // var li = othis.parents('li')
                  // html.parent().html('<li class="layim-msgbox-tips">暂无更多新消息</li>');
                  return layer.msg('暂无更多新消息');
                  // return false
              }
            });
          },
          end: '<li class="layim-msgbox-tips">暂无更多新消息</li>',
        });

        //打开页面即把消息标记为已读
        /*
  $.post('/message/read', {
    type: 1
  });
  */
        $("body").on("click", ".layui-btn", function() {
          var othis = $(this);
            type = othis.data("type");
          active[type] ? active[type].call(this, othis) : "";
        });
      });
    </script>
  </body>
</html>
